<template>
    <div>
        <!-- 顶部返回栏 -->
        <bufantop></bufantop>




        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check = "false"
        >
        <ul>
            <li v-for="item in list" :key="item.id" class="list" @click='goBranddetail(item.id)'>
                <img :src="item.app_list_pic_url" alt="">
                <span>{{item.name}} | {{item.floor_price}}元起</span>
            </li>
        </ul>


        </van-list>

    </div>
</template>

<script>
import bufantop from "@/components/bufantop.vue";
import { listaction } from "@/api/home/brandlist";
export default {
  data() {
    return {
      list: [],
      // 是否继续加载页面
      loading: false,
      // 是否结束加载
      finished: false,
      // 数据加载第几页
      start: 1,
    };
  },
  components: {
    bufantop,
  },
  created() {
      this.init()
  },
  methods: {
    //瀑布流数据设置
    onLoad() {
      this.init();
    },
    init() {
      listaction({
        page: this.start,
      }).then((res) => {
        console.log(res);
        this.list.push(...res.data);
        this.start++;
        // this.start 当前页数 >  >= res.total  总页数 4
        if(this.start  >  res.total){
            this.finished = true;
        }
        this.loading = false
      });
    },
    //将数据传给品牌详情页
    goBranddetail(id){
      console.log(id);
      this.$router.push({path:"/home/branddetail",query:{id}})
    }
  },
};
</script>

<style lang="scss" scoped>
.list{
    width: 375px;
    height: 208px;
    position: relative;
    margin-bottom: 2px;
}
.list img{
    width: 100%;
    height: 100%;
}
.list span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 18px;
    color: #fff;
    font-weight: bold;
}
</style>